<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div id="app">
        
        <h3>你喜欢什么球？<input type="checkbox" id="checkbox" v-model="checked" @change="changeAllChecked()">全选</h3>

        <input type="checkbox" id="篮球" value="篮球" v-model="checkedNames">
        <label for="篮球">
            篮球
        </label>
        <input type="checkbox" id="足球" value="足球" v-model="checkedNames">
        <label for="足球">
            足球
        </label>
        <input type="checkbox" id="排球" value="排球" v-model="checkedNames">
        <label for="排球">
            排球
        </label>
        <input type="checkbox" id="=网球" value="网球" v-model="checkedNames">
        <label for="网球">
            网球
        </label>
        <br>

        <div>
            <button @click="checkAll()">全选</button>
            <button @click="noCheckAll()">全不选</button>
            <button @click="checkElse()">反选</button>
            <button @click="showValue()">提交</button>
        </div>

        <span>
            {{className}}
        </span>
    </div>
        
</body>
</html>

<script>
    var vm = new Vue({
	el: '#app',
	data: {
        className: '此处将显示结果',
		checked: false,
		checkedNames: [],
		checkedArr: ["篮球", "足球", "排球", "网球"]
	},
	methods: {
        checkAll(){
            this.checkedNames = this.checkedArr;
        },
        noCheckAll(){
            this.checkedNames = [];
        },
        checkElse() {
            var arr = this.checkedArr.filter(el => !this.checkedNames.includes(el));
            this.checkedNames = arr;
        },
        showValue() {
                this.className = "我最喜欢的球是："
                this.checkedNames.forEach((item) => {
                        this.className += item + " ";
                });
        },
		changeAllChecked: function() {
			if (this.checked) {
				this.checkedNames = this.checkedArr
			} else {
				this.checkedNames = []
			}
		}
	},
	watch: {
		"checkedNames": function() {
			if (this.checkedNames.length == this.checkedArr.length) {
				this.checked = true
			} else {
				this.checked = false
			}
		}
	}
})
</script>